<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


<h1 class="title">Agregar Ruta de Escape</h1>
<hr>
<p class="meta"></p>
<div class="entry">
    <center>
        <html:form enctype="multipart/form-data" action="/agregarRutaEscape" method="POST" 
                   scope="" styleId="RE_Form" target="returnMsg" onsubmit="return are();">
            <table>
                <tbody>
                    <tr>
                        <td colspan="2">
                            <font color="red">
                                <br>
                                
                                &nbsp;
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Sede:</td>
                        <td><select id="sede" name ="sede" property="sede" onchange="listEspacios(this.value);">
                                <script type="text/javascript">
                                    $.getJSON("listaSedeAction.do",
                                    function(data) {
                                        $('#sede').empty();
                                        $('#sede').append("<option value='seleccionar'></option>");
                                        $.each(data.consultarSede, function(i,item){
                                            var string = "<option value='"+ item.nombre +"'>"+item.nombre+"</option>";
                                            $('#sede').append(string)
                                        });
                                    });
                                </script>
                                <option value="seleccionar">Seleccionar</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br><font color="red">*&nbsp;</font>Nombre del edifico:
                        </td>
                        <td>
                            <html:select property="nombreEdificio" styleId="edificios"></html:select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <font color="red">*&nbsp;</font>Identificador del piso:
                        </td>
                        <td>
                            <html:select property="idPiso" styleId="pisos"></html:select>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Usada:</td>
                        <td><html:checkbox property="usada" value="si"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Fecha Revision:</td>
                        <td><html:text property="fechaRevision" styleId="fechaRevision" size="40"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Plano de la Ruta:</td>
                        <td><html:file property="rutaFoto" styleId="rutaFoto" size="40"onchange="comprueba_extension(value);"/></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><iframe id="returnMsg" name="returnMsg" src="#"></iframe></td>
                    </tr>
                </tbody>
            </table>
            <br>
            <font color="red"><p>Los campos que tienen (*) son obligatorios.</p></font>
            <br>

            <html:submit value="Agregar"/>
            <html:button property="" styleId="RE" value="Atrás"/>
        </html:form>
    </center>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">
    $(function(){
        $('#fechaRevision').datepicker({
            dateFormat: 'dd/mm/yy',
            maxDate: new Date(),
            showOn: "button",
            buttonImage: "style/images/calendar.gif",
            buttonText: "calendario"
        }).attr('readonly', true);
        listEdificios();
    });

    $('#edificios').change(function(){
        ed = $('#edificios :selected').val();
        if(ed == "") return;
        getPisosSelect(ed);
    });

    function comprueba_extension(rutaFoto) {
        extensiones_permitidas = new Array( ".jpeg", ".png", ".gif" );
        mierror = "";
        //recupero la extensión de este nombre de archivo
        extension = (rutaFoto.substring(rutaFoto.lastIndexOf("."))).toLowerCase();
        //compruebo si la extensión está entre las permitidas
        permitida = false;
        for (var i = 0; i < extensiones_permitidas.length; i++) {
            if (extensiones_permitidas[i] == extension) {
                permitida = true;
               break;
            }
        }
        if (!permitida) {
            mierror = "Compruebe la extensión del archivo de imagen. \nSólo se pueden cargar archivos con extensiones: " + extensiones_permitidas.join();
        }else{
            //submito!
            return 1;
        }
        //si estoy aqui es que no se ha podido submitir
        alert (mierror);
        $("#rutaFoto").val(null);
        return 0;
    }
</script>
